<template>
  <h1>09-组合API-toRefs函数</h1>
  <h2>obj:{{ obj }}</h2>
  <h2>name：{{ name }}</h2>
  <h2>age：{{ age }}</h2>
  <button @click="btn">点我</button>
</template>

<script>
/* 
  目标：toRefs 转换响应式对象中所有属性为单独响应式数据
*/
import { reactive, toRef, toRefs } from 'vue'
export default {
  name: 'App',
  setup() {
    // 定义响应式对象数据
    const obj = reactive({
      name: '小马',
      age: 88,
    })

    // 修改名字的函数
    const btn = () => {
      obj.name = '老马'
      obj.age = 18
      console.log('obj变了吗', obj)
    }

    // toRef转换响应式数据包装成对象，value 存放值的位置
    // const name = toRef(obj, 'name')
    // const age = toRef(obj, 'age')
    // console.log(name);  // ObjectRefImpl 响应式对象
    // return { obj, name, age, btn }

    // 🔔 Vue3中控制台打印的时候，看到 Proxy 或者 ref 都表示响应式数据，改变数据会同步到视图。
    const obj2 = toRefs(obj)
    console.log(obj2) // { name: ObjectRefImpl, age: ObjectRefImpl }

    // 返回给模板使用
   //  return { obj, ...toRefs(obj), btn }
    return  {obj,...obj2,btn}
  },
}
</script>